<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <style>
        body{
            background-image: url("../image/水漫漫.jpg");
            background-repeat: no-repeat;
            background-size: 100%;
            font-size: 25px;
            font-family:STXingkai;
        }
        a{
            text-decoration:none;
        }
        button{
            margin:10px;
        }
    </style>
</head>
<body>

    <table  id="type-tab"  class="table table-hover" style="font-size: 18px;color:yellow ">
        <tr>
            <th>id</th>
            <th>类型名称</th>
        </tr>
        <tr v-for="t in list">
            <td>{{t.id}}</td>
            <td>{{t.tname}}</td>
        </tr>
    </table>
    <!--引入js-->
    <script type="text/javascript" src="../css/jquery-3.4.1.js"></script>
    <script src="../bootstrap-4.6.0-dist/js/bootstrap.js" ></script>
    <script src="../vue/vue.js" charset="utf-8"></script>
    <script>
    let typeTabVUe = new Vue({
        el:"#type-tab",
        data:{list:selType()}
    });
    //查询图书类型 需要一开始就展示列表 需要改为同步的ajax
    function selType() {
        let list;
        $.ajax({
            type:"post",
            url:"../Type/selType",
            data:"json",
            async:false,//设置ajax为同步
            success:function (json) {
                list = json;
            }
        })
        return list;
    }
    </script>
</body>
</html>